<template>
  <div id="bigBtext">
    <el-row :gutter="20">
      <el-col :span="8" class="bigers">
        <div id="texTopbox"><span class="textTop">居民标签</span></div>
        <div class="smellBtext">
          <div class="fletext"><span>高血压</span> <span>200</span></div>
          <el-progress
            :percentage="50"
            :show-text="false"
            style="padding: 0 20px"
          ></el-progress>
        </div>
        <div class="smellBtext">
          <div class="fletext"><span>冠心病</span> <span>200</span></div>
          <el-progress
            :percentage="50"
            :show-text="false"
            style="padding: 0 20px"
          ></el-progress>
        </div>
        <div class="smellBtext">
          <div class="fletext"><span>高血糖</span> <span>200</span></div>
          <el-progress
            :percentage="50"
            :show-text="false"
            style="padding: 0 20px"
          ></el-progress>
        </div>
        <div class="smellBtext">
          <div class="fletext"><span>高血压</span> <span>200</span></div>
          <el-progress
            :percentage="50"
            :show-text="false"
            style="padding: 0 20px"
          ></el-progress>
        </div>
        <div class="smellBtext">
          <div class="fletext"><span>高血脂</span> <span>200</span></div>
          <el-progress
            :percentage="50"
            :show-text="false"
            style="padding: 0 20px"
          ></el-progress>
        </div>
        <div class="smellBtext">
          <div class="fletext"><span>慢病护理</span> <span>200</span></div>
          <el-progress
            :percentage="50"
            :show-text="false"
            style="padding: 0 20px"
          ></el-progress>
        </div>
        <div class="smellBtext">
          <div class="fletext"><span>多动症</span> <span>200</span></div>
          <el-progress
            :percentage="50"
            :show-text="false"
            style="padding: 0 20px"
          ></el-progress>
        </div>
      </el-col>
      <el-col :span="16" class="prerunTete">
        <div id="bodeyTextb"><span id="textT_1">居民指标异常</span> <router-link to=""><span id="textT_2">全部></span></router-link></div>
        <!-- 小卡片 -->
        <div>
          <router-link to="">
            <div class="content">
        <el-card class="box-card" v-for="item in 3"  :body-style="{ padding: '20px 5px' }">
            <el-avatar :size="70"> user </el-avatar>
            <p><span style="font-size: 18px; font-weight: 500;">王然</span> <span style="font-weight: 400;
    font-size: 12px;
    color: #CCCCCC;">25岁 <el-icon>
                        <Male />
                    </el-icon></span>
            </p>
            <el-tag color="rgba(40, 208, 148, 1)" effect="dark" round>查看详情</el-tag>
            <div style="margin-top: 16px; display: flex; justify-content: space-around;">
                <el-tag color="rgba(250, 116, 107, 0.0980392156862745)" type="danger" effect="light" round>高血压</el-tag>
                <el-tag color="rgba(108, 118, 244, 0.0980392156862745)" effect="light" round>冠心病</el-tag>
                <el-tag color="rgba(253, 219, 120, 0.0980392156862745)" type="warning" effect="light" round>高血糖</el-tag>
            </div>
        </el-card>
    </div>
          </router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
} from "vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  name: "Tabletext",
  components: {},
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({});
    const funcList = {
      getInfo() {},
    };
    onBeforeMount(() => {});
    onMounted(() => {
      funcList.getInfo();
    });
    return {
      ...toRefs(state),
      ...funcList,
    };
  },
});
</script>
<style scoped lang='less'>
#bigBtext {
  padding-top: 30px;
}
.bigers {
  width: 100%;
  box-shadow: 10px 10px 5px rgb(242, 245, 246);
  height: 384px;
  border-radius: 20px;
  #texTopbox {
    display: flex;
    .textTop {
      color: #333333;
      font-size: 16px;
      font-family: "PingFangHK-Medium", "PingFang HK Medium", "PingFang HK";
      padding: 10px 20px;
    }
  }
  .smellBtext{
    padding-top:3px;
    .fletext {
    display: flex;
    justify-content: space-between;
    span {
      padding: 10px 20px;
      font-size: 13px;
      color: #999999;
    }
  }
  }
  
}
.prerunTete{
  width: 100%;
  box-shadow: 10px 10px 5px rgb(242, 245, 246);
  height: 384px;
  border-radius: 20px;
  #bodeyTextb{
    display: flex;
    justify-content: space-between;
    #textT_1{
      color: #333333;
      font-size: 16px;
      font-family: "PingFangHK-Medium", "PingFang HK Medium", "PingFang HK";
      padding: 10px 20px;
    }
    #textT_2{
      color: #999999;
      font-size: 12px;
      font-family: "PingFangHK-Medium", "PingFang HK Medium", "PingFang HK";
      padding: 10px 20px;
      cursor: pointer;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 30px;
    text-align: center;
}

.box-card {
    width: 200px;
    height: 230px;
    margin: 20px 10px;
}
}
</style>